<template>
	<div class="courTypeLabelBox">
		<!-- <p>这里是 tag 组件的内容</p> -->
		<div class="courTypeLabels">
			<div class="courTypeLabelTitle">类型</div>
			<div class="courseTypeLabelContent">
				<div class="courTypeLabel allTypeLabel" :class="{ 'select': selectTypeLabels.typeList.length <= 0 }" @click="clearSelect('type')">全部</div>
				<div class="courTypeLabel" v-for="type in typeLabels.typeList"
					:class="{ 'select': isSelect(type.typeId, 'type') }" @click="typeClick(type)"
				:key="type.typeId">
					{{ type.typeName }}
				</div>
			</div>
		</div>
		<div class="courTypeLabels">
			<div class="courTypeLabelTitle">标签</div>
			<div class="courseTypeLabelContent">
				<div class="courTypeLabel allTypeLabel" :class="{ 'select': selectTypeLabels.labelList.length <= 0 }" @click="clearSelect('label')">全部</div>
				<div class="courTypeLabel" v-for="label in typeLabels.labelList"
					:class="{ 'select': isSelect(label.labelId, 'label') }" @click="labelClick(label)"
				:key="label.labelId">
					{{ label.labelName }}
				</div>
			</div>
		</div>
		<div class="courTypeLabels">
			<div class="courTypeLabelTitle">难度</div>
			<div class="courseTypeLabelContent">
				<div class="courTypeLabel allTypeLabel" :class="{ 'select': selectTypeLabels.difficulty?.difficultyId == 0 }" @click="clearSelect('difficulty')">全部</div>
				<div class="courTypeLabel" v-for="difficulty in typeLabels.difficultyList"
					:class="{ 'select': selectTypeLabels.difficulty?.difficultyId == difficulty.difficultyId }" @click="difficultyClick(difficulty)"
				:key="difficulty.difficultyId">
					{{ difficulty.difficultyName }}
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
import { onMounted, ref } from 'vue';
import { courseTypeApi } from '@/api/course/Course';
import { CourseDifficulty, CourseLabel, CourseType } from '@/types/Course';
	export default {
		name: 'courTypeLabelBox'
	};
export interface SelectTypeLabels {
	courseName?: string,
	typeList: CourseType[],
	labelList: CourseLabel[],
	difficulty: CourseDifficulty
}
</script>

<script setup lang="ts">
	// 标签数据
	const typeLabels = ref<{
		typeList: CourseType[],
		labelList: CourseLabel[],
		difficultyList: CourseDifficulty[]
	}>({
		typeList: [],
		labelList: [],
		difficultyList: []
	});
	// 选中标签数据
	const selectTypeLabels = ref<SelectTypeLabels>({
		typeList: [],
		labelList: [],
		difficulty: {
			difficultyId: 0,
			difficultyName: '全部'
		}
	});

	// 定义事件
	const emit = defineEmits<{
        // 删除事件
        (e: 'updateData', selectTypeLabels: SelectTypeLabels): void;
    }>();

    onMounted(() => {
		// 获取课程类型列表
		courseTypeApi.getType().then(res => {
            typeLabels.value.typeList = res;
        });
        // 获取课程标签列表
        courseTypeApi.getLabelByList(null).then(res => {
            typeLabels.value.labelList = res;
        });
        // 获取课程难度列表
        courseTypeApi.getDifficulty().then(res => {
            typeLabels.value.difficultyList = res;
        });
    });

	// 判断是否选择
	const isSelect = (id: number, type?: string) => {
        if(type == 'type') return selectTypeLabels.value.typeList.some(item => item.typeId === id);
        else return selectTypeLabels.value.labelList.some(item => item.labelId === id);
    };
	// 得到 Id 列表
	// const getIds = (type?: string): number[] => {
    // 	if(type == 'type') return selectTypeLabels.value.typeList.map(item => item.typeId);
    // 	else return selectTypeLabels.value.labelList.map(item => item.labelId);
    // }

	// 清除选择
	const clearSelect = (type: string) => {
		if(type == 'type')
		{
			selectTypeLabels.value.typeList = [];
			typeClick(0);
		}
		else if(type == 'label') selectTypeLabels.value.labelList = [];
		else if(type == 'difficulty') selectTypeLabels.value.difficulty = {
			difficultyId: 0,
			difficultyName: '全部'
		};
		else
		{
        	selectTypeLabels.value.typeList = [];
        	selectTypeLabels.value.labelList = [];
			selectTypeLabels.value.difficulty = {
				difficultyId: 0,
				difficultyName: '全部'
			};
		}
		updateData();
    };
	
    // 类型选择
    const typeClick = (type: any) => {
        if (type != 0 && !isSelect(type.typeId, 'type'))
        {
            selectTypeLabels.value.typeList.push(
                {
                    typeId: type.typeId,
                    typeName: type.typeName
                }
            );
        }
        else
        {
            selectTypeLabels.value.typeList = selectTypeLabels.value.typeList.filter(item => item.typeId !== type.typeId);
        }
		if(selectTypeLabels.value.typeList.length > 0)
		{
        	// 获取课程标签列表
        	courseTypeApi.getLabelByList(selectTypeLabels.value.typeList.map(item => item.typeId)).then(res => {
        	    typeLabels.value.labelList = res;
        	    // 从已选择的列表中去除 不存在的
        	    selectTypeLabels.value.labelList = selectTypeLabels.value.labelList.filter(item => 
					typeLabels.value.labelList.some(label => label.labelId === item.labelId)
        	    );
        	});
		}
		else
		{
        	// 获取课程标签列表
        	courseTypeApi.getLabelByList(null).then(res => {
        	    typeLabels.value.labelList = res;
        	});
		}
		
		// 全部选择
		if(selectTypeLabels.value.typeList.length >= typeLabels.value.typeList.length)
			clearSelect('type');
		else updateData();
    };

	// 标签选择
	const labelClick = (label: any) => {
        if (!isSelect(label.labelId))
        {
            selectTypeLabels.value.labelList.push(
                {
                    labelId: label.labelId,
                    labelName: label.labelName
                }
            );
        }
        else
        {
            selectTypeLabels.value.labelList = selectTypeLabels.value.labelList.filter(item => item.labelId !== label.labelId);
        }

		// 全部选择
		if(selectTypeLabels.value.labelList.length >= typeLabels.value.labelList.length)
			clearSelect('label');
		else updateData();
    };
	
    // 难度选择
    const difficultyClick = (difficulty: CourseDifficulty) => {
		console.log(difficulty);
		if(
			selectTypeLabels.value.difficulty?.difficultyId == difficulty.difficultyId ||
			difficulty.difficultyId == 0
		)
		{
			clearSelect('difficulty');
			return;
		}
        selectTypeLabels.value.difficulty = difficulty;
		
        // 触发更新事件
		updateData();
    };

	const updateData = () => {
        emit('updateData', selectTypeLabels.value);
	};

</script>

<style scoped>
.courTypeLabelBox {
	width: 100%;
	height: 100%;
	padding: 20px;
	border-radius: 10px;
	font-size: 16px;
    background-color: rgba(255, 255, 255, .5);
    backdrop-filter: blur(2rem);
    	-webkit-backdrop-filter: blur(2rem);
    	-moz-backdrop-filter: blur(2rem);
    	-ms-backdrop-filter: blur(2rem);
}
/* 标签列表 */
.courTypeLabelBox .courTypeLabels {
	width: 100%;
	height: 100%;
	padding: 5px 0px;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
}
/* 标签标题 */
.courTypeLabelBox .courTypeLabels .courTypeLabelTitle {
	min-width: 70px;
	height: 30px;
	margin: 5px 0px;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* 标签容器 */
.courTypeLabelBox .courTypeLabels .courseTypeLabelContent {
	width: 100%;
	max-height: 200px;
	overflow-y: auto;
}

/* 标签样式 */
.courTypeLabelBox .courTypeLabels .courTypeLabel {
	padding: 2px 15px;
	margin: 5px;
	display: inline-block;
	border-radius: 10px;
	color: rgba(50, 50, 50, 1);
	border: 1px solid rgba(150, 150, 150, .5);
}
.courTypeLabelBox .courTypeLabels .courTypeLabel:hover {
	color: rgba(65, 185, 255, 1);
	border: 1px solid rgba(65, 185, 255, 1);
}
/* 选中样式 */
.courTypeLabelBox .courTypeLabels .courTypeLabel.select {
	color: rgba(255, 255, 255, 1);
	border: 1px solid rgba(65, 185, 255, 1);
	background-color: rgba(65, 185, 255, 1);
}
</style>